<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        position: absolute;
        left: 0;
        top: 0;
      }
    </style>
  </head>

  <body>
    <img src="./plane/2.png" alt="" id="bulletLeft0" style="display: none" />
    <img src="./plane/2.png" alt="" id="bulletLeft1" style="display: none" />
    <img src="./plane/2.png" alt="" id="bulletLeft2" style="display: none" />
    <img src="./plane/2.png" alt="" id="bulletLeft3" style="display: none" />
    <img src="./plane/2.png" alt="" id="bulletLeft4" style="display: none" />
    <img src="./plane/2.png" alt="" id="bulletRight0" style="display: none" />
    <img src="./plane/2.png" alt="" id="bulletRight1" style="display: none" />
    <img src="./plane/2.png" alt="" id="bulletRight2" style="display: none" />
    <img src="./plane/2.png" alt="" id="bulletRight3" style="display: none" />
    <img src="./plane/2.png" alt="" id="bulletRight4" style="display: none" />
    <img src="./plane/1.gif" alt="" id="plane" />
  </body>

  <script>
    var plane = document.getElementById("plane");
    // 就是在控制小人跑动的基础上添加发射导弹功能

    planeMove(plane);

    function planeMove(obj) {
      var left = false,
        right = false,
        top = false,
        bottom = false;
      setInterval(function () {
        if (left) {
          obj.style.left = obj.offsetLeft - 10 + "px";
        } else if (right) {
          obj.style.left = obj.offsetLeft + 10 + "px";
        }
        if (top) {
          obj.style.top = obj.offsetTop - 10 + "px";
        } else if (bottom) {
          obj.style.top = obj.offsetTop + 10 + "px";
        }
      }, 20);
      document.onkeydown = function (ev) {
        var ev = ev || event;

        switch (ev.keyCode) {
          case 37:
            left = true;
            break;
          case 38:
            top = true;
            break;
          case 39:
            right = true;
            break;
          case 40:
            bottom = true;
            break;
          case 32:
            launch(
              obj.offsetLeft + 9,
              obj.offsetTop + 15,
              obj.offsetLeft + 52,
              obj.offsetTop + 15
            );
            break;
        }
      };
      document.onkeyup = function (ev) {
        var ev = ev || event;
        switch (ev.keyCode) {
          case 37:
            left = false;
            break;
          case 38:
            top = false;
            break;
          case 39:
            right = false;
            break;
          case 40:
            bottom = false;
            break;
        }
      };

      // 按空格发射导弹的函数
      function launch(LBleft, LBtop, RBleft, RBtop) {
        for (var i = 0; i < 5; i++) {
          var aLeftBullet = document.getElementById("bulletLeft" + i);
          var aRightBullet = document.getElementById("bulletRight" + i);
          // 用if，防止把所有循环出来后都执行里面的代码
          if (
            aLeftBullet.style.display == "none" ||
            aRightBullet.style.display == "none"
          ) {
            aLeftBullet.style.display = "block";
            aRightBullet.style.display = "block";
            aLeftBullet.style.left = LBleft + "px";
            aLeftBullet.style.top = LBtop + "px";
            aRightBullet.style.left = RBleft + "px";
            aRightBullet.style.top = RBtop + "px";
            break; // 加这个是当有一个子弹执行了后就停止循环，防止所有的子弹都执行里面的代码
          }
        }
      }
      // 只要子弹出去视口外就回收子弹，放在launch函数外，放在里面效果会叠加
      setInterval(function () {
        for (var i = 0; i < 5; i++) {
          var aLeftBullet = document.getElementById("bulletLeft" + i);
          var aRightBullet = document.getElementById("bulletRight" + i);
          aLeftBullet.style.top = aLeftBullet.offsetTop - 10 + "px";
          aRightBullet.style.top = aRightBullet.offsetTop - 10 + "px";
          if (aLeftBullet.offsetTop < -14 || aRightBullet.offsetTop < -14) {
            aLeftBullet.style.display = "none";
            aRightBullet.style.display = "none";
          }
        }
      }, 30);
    }
  </script>
</html>
